<template>
	<view class="star-bc">
		<view class="star-header">
			<view class="header-flex">
				<view class="header-user">
					<uv-avatar :src='data.avatar' size="52rpx"></uv-avatar>
				</view>
				<view class="header-name">
					{{data.nickName}}
				</view>
				<view class="header-cre">创建</view>
			</view>
			<view class="header-name">
				{{data.name}}
			</view>
			<view class="header-statistics">
				{{datas.length}}个作品·<view class="flex" v-if="data.isPublicly">公开<uv-icon
						name="lock-opened-fill"></uv-icon>
				</view>
				<view class="flex" v-else>私密<uv-icon name="lock-fill"></uv-icon></view>
			</view>
		</view>
		<view class="star-content">
			<view class="content-item" v-for="item in datas" @click="toPhotograph(item.photographId)">
				<uv-image :src="api.FileById+item.photographFileShowId" width="216rpx" height="216rpx"></uv-image>
				<view class="item-name">
					{{item.photographName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import api from './api';
	import {
		useUserStore
	} from '@/stores/user';
	const userStore = useUserStore()
	const datas = ref([])
	const data = ref({})
	const id = ref('')
	console.log('??')
	onMounted(() => {
		console.log(123)
		let pages = getCurrentPages(); // 获取当前打开过的页面路由数组
		id.value = pages[pages.length - 1].options.id; // 获取当前页面栈的实例
		console.log('收藏夹id:', id.value);
		getStarItem()
		getStarById()
	})
	
	const toPhotograph = (id)=>{
		uni.navigateTo({
			url: '/pages/home/detail?id=' + id
		})
	}

	const getStarById = () => {
		api.getStarById(id.value).then(res => {
			data.value = res.data
			data.value.avatar = api.FileById + res.data.appUserAvatar
			console.log('创建者信息', res.data)
		})
	}

	const getStarItem = () => {
		api.getStarItem(id.value).then(res => {
			datas.value = res.datas
			console.log('收藏', datas.value);
		})
	}
</script>

<style lang="scss">
	.star-bc {
		padding: 40rpx;

		.star-content {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;

			.content-item {
				position: relative;

				.item-name {
					position: absolute;
					top: 170rpx;
					padding-left: 20rpx;
					font-size: 26rpx;
					color: white;
				}
			}
		}

		.star-header {
			.header-flex {
				display: flex;
				justify-content: left;
				gap: 10rpx;

				.header-name {
					font-size: 28rpx;
					color: #333;
					height: 52rpx;
					line-height: 52rpx;
				}

				.header-cre {
					font-size: 26rpx;
					color: #666;
					line-height: 52rpx;
				}
			}

			.header-name {
				height: 70rpx;
				line-height: 70rpx;
			}

			.header-statistics {
				display: flex;
				justify-content: left;
				font-size: 14px;
				color: #666;

				.flex {
					display: flex;
				}
			}
		}
	}
</style>